<template>
    <div class="flex" style="justify-content:space-between;flex:1;">
        <div style="align-items:center;" class="flex">
            <el-button type="primary" class="margin-left f16" :icon="iconClass" size="mini" @click="toggleSide"></el-button>
        </div>
        <div style="align-items:center;" class="flex">
            <ul class="cl user-info-main">
                <li class="y">
                    <a type="primary" :class="linkClass" @click="quit()">退出</a>
                </li>
                <li class="y hand line-height-0">
                    <a @click="$router.push({path:'/member/changepwd'})">修改密码</a>
                </li>
                <li class="y hand line-height-0">
                    <a href="#">
                        <div class="head-img">
                            <img
                                src="https://avatar.pgyer.com/5dcb046297100a5f6a24b1130363c68f?imageMogr2/thumbnail/!200x200r/gravity/center/crop/200x200"/>
                            <span>{{ $user.username() }}</span>
                        </div>
                    </a>
                </li>
                <li class="y">
                    <a :class="linkClass" @click="$router.push({path:'/sms'})"><i class="el-icon-message-solid"></i></a>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    name: "UserNavMain",
    data() {
        return {
            sideOpen: false
        }
    },
    props: {
        linkClass: {
            type: String,
            default: 'dark-2'
        }
    },
    methods: {
        quit() {
            console.log('fds');
            this.$utils.sessionClear();
            this.$router.replace({path: '/'});
        },
        toggleSide() {
            this.sideOpen = !this.sideOpen;
            this.$emit('sideToggle', this.sideOpen);
        }
    },
    computed: {
        iconClass() {
            if (this.sideOpen) {
                return 'el-icon-s-unfold';
            } else {
                return 'el-icon-s-fold';
            }
        }
    }
}
</script>
